<template>
<div class='scroll-wrapper' @scroll="hScroll" ref="refScroll">
    <!-- 内容列表 -->
<van-pull-refresh v-model="isLoadingNew" @refresh="onRefresh">
<van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
<van-cell
 v-for="(item, idx) in list" :key="idx"
 :title="item.title"
 @click="$router.push('/article/'+item.art_id.toString())"
 >
  <div slot="label">
    <!-- 图片 当前文章有几张图 就用几个宫格 -->
    <van-grid :column-num="item.cover.images.length" :border="false">
      <van-grid-item v-for="(img,idx) in item.cover.images" :key="idx">
        <van-image lazy-load :src="img" />
      </van-grid-item>
    </van-grid>
    <!-- 文章后面的文字说明 -->
     <div class="meta">
        <span>{{item.aut_name}}</span>
        <span>{{item.comm_count}}评论</span>
        <span>{{item.pubdate | relativeTime}}</span>
        <!-- 如果是登录用户，显示关闭按钮 -->
        <span class="close" @click.stop="closeArticle(item)" v-if="$store.state.tokenInfo.token">
          <van-icon name="cross"></van-icon>
        </span>
    </div>
  </div>
</van-cell>
</van-list>
</van-pull-refresh>
</div>
</template>
<script>
import { getArticles } from '@/api/articles'
export default {
  name: 'page-article',
  props: ['channel'],
  data () {
    return {
      list: [],
      timestamp: null,
      loading: false, // 是否正在加载
      finished: false, // 是否所有的数据全部加载完成
      isLoadingNew: false // 是否是 下拉刷新中....
    }
  },
  created () {
    this.$eventBus.$on('delArticle', obj => {
      // 解构赋值 obj  因为$emit将数据传递过来了
      const { articleID, channelID } = obj
      // console.log('我这里是', this.channel, '收到了事件qhjpl', obj)
      // console.log(obj)
      // 查看是否是当前的频道
      // 是否是当前频道：
      //   是：在list中找到编号是obj.articleId的数据，并删除
      //   否：不处理
      if (channelID !== this.channel.id) {
        return
      }
      // 在数组中找到你要删除的元素下标
      const idx = this.list.findIndex(article => {
        return article.art_id.toString() === articleID
      })
      // 如果找到 idx激素hi该下标 找不到就为-1
      if (idx !== -1) {
        // 找到了元素 删除该下标对应的文章
        this.list.splice(idx, 1)
      }
    })
  },
  methods: {
    // 关闭当前文章
    closeArticle (articleID) {
      // 显示弹出层 articleID接收文章参数  里面包含了文章的id
      this.$emit('showAction', articleID.art_id.toString())
      // console.log(articleID.art_id.toString())
    },
    async onLoad () {
      // 如果timestamp有值  将最新的时间戳赋值给它  这样获取的数据就捕获重复
      if (!this.timestamp) this.timestamp = Date.now()
      const res = await getArticles(this.channel.id, Date.now())
      // console.log(res)
      // 保存本次请求回来的数据中携带的时间戳，以便下传请求再传入
      this.timestamp = res.data.data.pre_timestamp
      //   返回的文章内容数据  是一个数组
      const arr = res.data.data.results
      //   将返回的数据添加到list中去  在将list中数据渲染到页面
      // 这种方法会将数据挨个添加到list中去
      this.list.push(...arr)
      //  加载状态结束
      this.loading = false
      // 判断是否全部加载完毕
      if (arr.length === 0) this.finished = true
    },
    async onRefresh () {
    // 1. 去取回最新的文章 .传入最新的时间戳
      const result = await getArticles(this.channel.id, Date.now())
      // 2. 把文章追加到 list 的 头部
      const arr = result.data.data.results
      this.list.unshift(...arr)
      // 3. 提示更新结果
      this.$toast.success('刷新成功' + arr.length + '条')
      // 4. 结束loading状态
      this.isLoadingNew = false
    },
    hScroll () {
      // console.log(this.$refs.refScroll.scrollTop)
      // scrollTop并不是定义在data中 响应式的数据
      this.scrollTop = this.$refs.refScroll.scrollTop
    }
  },
  activated () {
    console.log('激活 activated...activated...activated...activated...')
    if (this.scrollTop) {
      // 恢复滚动条位置
      this.$refs.refScroll.scrollTop = this.scrollTop
    }
  }
}
</script>
 <style lang='less' scoped>
//  让文字分开点
.meta{
  display: flex;
    span{
        margin-right: 10px;
    }
    .close{
    // 让它在最右边
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left:auto;
  }
}
</style>
